<template>
  <div id="user">
    <!-- 头部用户信息区域 -->
    <div class="user_info">
      <img :src="userInfo.headimgurl" alt class="user_info__avatar" />
      <div class="user_info__username">{{ userInfo.nickname }}</div>
    </div>
    <!-- 订单区域 -->
    <div class="orders_area">
      <van-grid class="orders_warp">
        <van-grid-item
          :icon="item.icon"
          :to="item.to"
          :text="item.name"
          v-for="(item,index) in pageOrdersList"
          :key="'orders_'+index"
        />
      </van-grid>
    </div>
    <!-- 功能设置区域 -->
    <div class="function_area">
      <van-cell-group>
        <van-cell
          :title="item.title"
          is-link
          :to="item.to"
          v-for="(item,index) in pageFunctionList"
          :key="'function_'+index"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'user',
  data() {
    return {
      // 用户信息对象
      userInfo: null,
      // 订单区域
      pageOrdersList: [
        {
          name: '待付款',
          icon: 'peer-pay',
          to: '/orders#peer-pay'
        },
        {
          name: '待发货',
          icon: 'paid',
          to: '/orders#paid'
        },
        {
          name: '待收货',
          icon: 'logistics',
          to: '/orders#logistics'
        },
        {
          name: '全部订单',
          icon: 'orders-o',
          to: '/orders#all'
        }
      ],
      // 功能区域
      pageFunctionList: [
        {
          title: '我的收藏',
          to: '/collection'
        },
        {
          title: '我的地址',
          to: '/location'
        },
        {
          title: '意见反馈',
          to: '/feedback'
        }
      ]
    }
  },
  methods: {
    getUserInfoFromStorage() {
      const userInfo = JSON.parse(window.localStorage.getItem('userInfo')) || {
        nickname: '丰业鲜生',
        headimgurl: require('../assets/logo.png')
      }
      this.userInfo = userInfo
    }
  },
  created() {
    this.getUserInfoFromStorage()
  }
}
</script>

<style lang="less" scoped>
#user {
  width: 100%;
  .user_info {
    width: 100%;
    height: 150px;
    background: linear-gradient(#aecdf3, #5ba0f4);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    .user_info__avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: 0 10px;
      background-color: #fff;
    }
    .user_info__username {
      font-size: 17px;
      font-weight: bold;
      color: #fff;
      margin-left: 10px;
    }
  }
  .orders_area {
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px 10px;
    .function_warp {
      border-radius: 8px;
      overflow: hidden;
    }
  }
  .function_area {
    width: 100%;
    margin-top: 10px;
    padding: 0 5px;
  }
}
</style>
